<template>
	<div class="rcmdCfg">
		<h2 class="tit">推荐规则配置</h2>
		<span style="color:red;margin-left:15px">（备注：本页面全部为必填项,排序值最小为1）</span>
		<Form :model="docSort" :label-width="100">
			<div class = 'timeindex'>
				<p class="title">医生推荐</p>
				<div class="box">
					<FormItem style="marginBottom: 10px;">
						<Row>
							<Col span="1">&nbsp;</Col>
							<Col span="21" :style="{textAlign: 'center', fontSize: '16px'}">排序</Col>
						</Row>
					</FormItem>
				
						<FormItem v-for="(item, index) in docSort.slice(0,4)" :key="index" :label="item.configName + '：'">
							<Row>
								<Col span="9">
									<RadioGroup v-model="item.configValue2">
										<Radio :disabled="disabled" label="1">由低到高</Radio>
										<Radio :disabled="disabled" label="-1">由高到低</Radio>
									</RadioGroup>
								</Col>
								<Col span="5">
									<!-- <InputNumber :disabled="disabled" style="width: 100%" v-model="item.configValue" step="1" precision="0" /> -->
									<InputNumber :disabled="disabled" style="width: 100%" v-model="item.configValue" :min="1" :max='9999'></InputNumber>
									<!-- <input type="number" :disabled="disabled" v-model="item.configValue" :min="1" class="ivu-input" /> -->
								</Col>
							</Row>
						</FormItem>	
				</div>					
			</div>
			<div class = 'timeindex'>
				<p class="title">药师推荐</p>
				<div class="box">
					<FormItem style="marginBottom: 10px;">
						<Row>
							<Col span="1">&nbsp;</Col>
							<Col span="21" :style="{textAlign: 'center', fontSize: '16px'}">排序</Col>
						</Row>
					</FormItem>
					<FormItem v-for="(item, index) in docSort.slice(4)" :key="index" :label="item.configName + '：'">
						<Row>
							<Col span="9">
								<RadioGroup v-model="item.configValue2">
								<Radio :disabled="disabled" label="1">由低到高</Radio>
								<Radio :disabled="disabled" label="-1">由高到低</Radio>
								</RadioGroup>
							</Col>
							<Col span="5">
								<InputNumber :disabled="disabled" style="width: 100%" v-model="item.configValue" :min="1" :max='9999'></InputNumber>
								<!-- <input type="number" :disabled="disabled" v-model="item.configValue" :min="1" class="ivu-input" /> -->
								<!-- <InputNumber :disabled="disabled" style="width: 100%" v-model="item.configValue" step="1" precision="0" /> -->
							</Col>
						</Row>
					</FormItem>
				</div>					
			</div>
		</Form>
		<div style="width:100%;text-align:center;">
			<Button  v-if="!disabled" type="primary" class="save-btn" @click="submit()">
				<Icon type="ios-checkmark" style="margin-right: 5px" />保存
			</Button>
			<Button v-if="!disabled" class="save-btn" @click="back()">
			<i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
			</Button>
			<Button  v-if="!disabled" type="error" class="save-btn" @click="del()">
				<Icon type="ios-checkmark" style="margin-right: 5px" />清除
			</Button>
			<Button v-else type="primary" class="save-btn" @click="() => disabled = false">
			<Icon type="ios-checkmark" style="margin-right: 5px" />修改
			</Button>
		</div>  
		<!-- 删除确认弹窗 -->
        <Modal
            v-model="showDelConfirmModal"
            title="清除确认"
            class="drugmanagement-commondrug-list-delModal">
            <p style="margin-left:30px">确认清空所有数据吗？</p>
            <div slot="footer" class="buttonbox">               
                <Button class="save-btn btn" type="primary" :loading="delLoading" @click="handleDel">
                    <Icon type="ios-checkmark" style="margin-right: 5px" />确认
                </Button>
                <Button class="cancel-btn btn" @click="showDelConfirmModal = false">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
                </Button>
            </div>
        </Modal>    		
	</div>
</template>

<script>
import api from "@/api/commonApi";
import { Tabs, TabPane } from "view-design";
export default {
	components: {
		Tabs,
		TabPane,
	},
	data() {
		return {
			disabled: true,
			docSort: [
				{
					configKey: "doctor_title_level",
					configValue: 1,
					configValue2: null,
					configName: "按职称排序"
				},
				{
					configKey: "doctor_evaluate_count",
					configValue: 1,
					configValue2: null,
					configName: "按评价排序"
				},
				{
					configKey: "doctor_item_fee_price",
					configValue: 1,
					configValue2: null,
					configName: "按价格排序"
				},
				{
					configKey: "doctor_inq_con_count",
					configValue: 1,
					configValue2: null,
					configName: "按咨询量排序"
				},
				{
					configKey: "pharmacy_title_level",
					configValue: 1,
					configValue2: null,
					configName: "按职称排序"
				},
				{
					configKey: "pharmacy_evaluate_count",
					configValue: 1,
					configValue2: null,
					configName: "按评价排序"
				},
				{
					configKey: "pharmacy_item_fee_price",
					configValue: 1,
					configValue2: null,
					configName: "按价格排序"
				},
				{
					configKey: "pharmacy_inq_con_count",
					configValue: 1,
					configValue2: null,
					configName: "按咨询量排序"
				}
			],
			showDelConfirmModal: false,
		}
	},
	created() {
		let breadList = [
			{ path: "/index", title: "首页" },
			{
				path: "",
				title: "系统配置"
			},
			{
				path: "/index/configuration/rules/index",
				title: "推荐规则配置"
			}
		];
		this.$emit("changeBreadList", breadList);
	},
	mounted() {
		this.configDetail();
	},
	methods: {
		back() {
			this.disabled = true
			location.reload();
		},
		del() {
			this.showDelConfirmModal = true
		},
		handleDel() {
			this.$axios.post(api.delConfig,{}).then(res => {
				if (res.data.code === 1) {
					this.disabled = true
					this.configDetail();
					this.showDelConfirmModal = false
					return this.$Message.info(res.data.message);;		
				} else {
					this.$Message.error('请求异常');
					return false;
				}
			}).catch(() => {
				this.loading = false;
			});
		},
		configDetail() {
			this.$axios.post(api.findConfigList,{}).then(res => {
				if (res.data.code === 1) {
					this.docSort = this.docSort.map(item => {
					let resObj = res.data.object.filter(item2 => item2.configKey === item.configKey)[0] || item;
					resObj.configValue && (resObj.configValue = Number(resObj.configValue));
					console.log(resObj)
					return resObj;
					});
					
				} else {
					this.$Message.error('请求异常');
					return false;
				}
			}).catch(() => {
				this.loading = false;
			});
		},
		submit(e) {
			let flag = false
			this.docSort.forEach(i =>{
				if(!i.configValue) {
					i.configValue = 1
				}
				if(!i.configValue2){
					flag = true
				}
			})
			if(flag) {
				return this.$Message.error('请检查各项是否填写完整')
			}
			let params = JSON.parse(JSON.stringify(this.docSort));
			this.$axios
				.post(api.createConfigList, params)
				.then(res => {
				if (res.data.code === 1) {
					this.disabled = true;
					this.$Message.success("配置成功");
				} else {
					this.$Message.error(res.data.message);
					return false;
				}
				})
				.catch(() => {
					this.loading = false;
				});
		},
	}
}
</script>

<style scoped lang="less">
.rcmdCfg {
	font-size: 14px;
	padding: 0;
	padding-bottom: 20px;
	width: 100%;
	padding: 20px 0px 10px 0px;
	margin-left: 1%;
	margin: 0 auto;
	background: #fff;
	.tit {
		margin:10px 0;
		font-weight:bold;
		text-align:center;
	}
	.timeindex {		
		width: 98%;
		display: flex;
		flex-direction: column;
		margin: 10px auto;
		border: 1px solid #f0f0f0;
		box-shadow: 0 4px 3px #ebedf8;
		border-radius: 5px;
		margin-bottom: 20px;
		.title {
			font-size: 20px;
			padding-left: 15px;
			margin-bottom: 20px;
			color: #333;
			height: 40px;
			line-height: 40px;
			background: #ebedf8;         
		}
		.box{
			width: 50%;
			padding: 0 30px;
			margin: 0 auto;
		}
	}
	.hongdian {
		color: red;
		font-size: 18px;
		margin-top: 5px;
		margin-right: -10px;
	}
}
.save-btn {
  	margin: 20px auto;
}
</style>